<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="content">
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				class="small-size-table"
				:data="tableData"
				:header-cell-style="getRowClass"
				highlight-current-row
				:max-height="tableHeight"
			>
				<el-table-column
					prop="creditLevel"
					align="center"
					:label="$t('agent.credit_level')"
				>
					<template slot-scope="scope">
						{{ scope.row }}
					</template>
				</el-table-column>
				<!-- <el-table-column
						prop="creditLevelName"
						align="center"
						:label="$t('agent.credit_level_name')"
					></el-table-column>
					<el-table-column
						prop="updatedAt"
						align="center"
						:label="$t('common.last_updateAt')"
					></el-table-column>
					<el-table-column
						prop="updatedBy"
						align="center"
						:label="$t('common.updateBy')"
					></el-table-column> -->
				<!-- <el-table-column prop="operating" align="center" :label="$t('common.actions')" fixed="right">
						<template slot-scope="scope">
							<el-button
                                v-if="hasPermission('774')"
								type="primary"
								icon="el-icon-edit"
								:disabled="loading"
								size="medium"
								@click="edit(scope.row)"
							>
								{{ $t('common.edit') }}
							</el-button>
						</template>
					</el-table-column> -->
			</el-table>
		</template>
		<el-dialog
			:title="$t('common.edit')"
			:visible.sync="dialogFormVisible"
			:destroy-on-close="true"
			width="520px"
			class="rempadding"
			@close="clear"
		>
			<el-divider></el-divider>
			<el-form ref="formSub" :model="dialogForm" :rules="rules">
				<el-form-item
					:label="$t('agent.credit_level') + ':'"
					prop="creditLevel"
				>
					<el-input
						v-model="dialogForm.creditLevel"
						autocomplete="off"
						disabled
						style="width: 330px"
						:placeholder="$t('common.please_enter')"
						clearable
					></el-input>
				</el-form-item>
				<el-form-item
					:label="$t('agent.credit_level_name') + ':'"
					prop="creditLevelName"
				>
					<el-input
						v-model="dialogForm.creditLevelName"
						:maxlength="10"
						autocomplete="off"
						style="width: 330px"
						:placeholder="$t('common.please_enter')"
						clearable
					></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="subAddOrEdit">
					{{ $t('common.save') }}
				</el-button>
			</div>
		</el-dialog>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import MainContent from '@/components/MainContent/index.vue'
export default {
	name: routerNames.createRiskRank,
	components: {
		MainContent
	},
	mixins: [list],
	data() {
		this.loadData = this.throttle(this.loadData, 1000)
		return {
			tableHeight: 480,
			otherDependenComponents: ['noParams'],
			tableData: [],
			dialogFormVisible: false,
			dialogForm: {
				id: undefined,
				creditLevel: undefined,
				creditLevelName: undefined
			}
		}
	},
	computed: {
		rules() {
			return {
				creditLevel: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: 'blur'
					}
				],
				creditLevelName: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: 'blur'
					}
				]
			}
		}
	},
	methods: {
		loadData() {
			this.loading = true
			this.$api
				.getCreditLevelConfcreditList({ creditType: 2 })
				.then((res) => {
					this.loading = false
					if (res?.code === 200) {
						this.tableData = res.data || []
					} else {
						this.$message({
							message:
								res?.msg ||
								this.$t('agent.interface_exceptions'),
							type: 'error'
						})
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		edit(val) {
			this.dialogForm = {
				id: val.id,
				creditLevel: val.creditLevel,
				creditLevelName: val.creditLevelName
			}
			this.dialogFormVisible = true
		},
		subAddOrEdit() {
			const params = {
				...this.dialogForm
			}
			this.$refs.formSub.validate((valid) => {
				if (valid) {
					this.$api
						.getCreditLevelConfUpdateCredit(params)
						.then((res) => {
							if (res.code === 200) {
								this.$message.success(
									this.$t('common.modify_success')
								)
								this.dialogFormVisible = false
								this.loadData()
							}
						})
						.catch((err) => {
							this.$message.error(err)
						})
				}
			})
		},
		clear() {
			this.dialogForm = {
				id: undefined,
				creditLevel: undefined,
				creditLevelName: undefined
			}
			this.$refs.formSub.clearValidate()
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	color: #909399;
	font-weight: 700;
}
::v-deep .rempadding {
	.el-dialog__header {
		padding: 20px 20px 0;
	}
	.el-dialog__body {
		padding: 0;
		.contentBox,
		form {
			padding: 0 20px;
		}
	}
	.dialog-footer {
		text-align: center;
	}
}
::v-deep .params {
	display: none;
}
</style>
